<script setup lang="ts">
import { useCounterStore } from "./stores/counter";
import { ref } from "vue";
import { storeToRefs } from "pinia";

import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";

const store = useCounterStore();
const { name, age, count } = storeToRefs(store);
// const { name, age, count } = store

console.log("store", store);

// let name = ref<string>(store.name)
// let age = ref<number>(store.age)
// let count = ref<number>(store.count)

const countPlus = () => {
  store.count++;
  // store.name = "yt"
  console.log("store", store);
};

const reset = () => {
  store.$reset();
};

// const patchStore = () => {
// store.$patch({
//   name: "ajie",
//   age: 22,
//   count: 77
// })

// store.$patch(state => {
// console.log(state)
// state.items.push({
//   name:"jiege",
//   age:24
// })
// state.hasChanged = true
// })
// }

// const saveName = () => {
//   store.saveName("wuzhoujie")
// }
// console.log("store", store);
// ref<string>(name)
// const age = ref<number>(age)
// const count = ref<number>(count)
</script>

<template>
  <div id="container">
    <Header></Header>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<style scoped lang="scss">
#container {
  width: 1200px;
  height: 1000px;
  margin: 0 auto;
}
</style>
